<template>
	<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
		<view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
			<view class="ss-flex ss-col-center">
				<view class="line"></view>
				<view class="title ss-m-l-20 ss-m-r-10">详细信息</view>
			</view>
		</view>
		<view v-if="props.metaData.product.platformType == 0" class="card-content">
			<view class="notice-box">
				<view class="notice-box__content">
					<view class="notice-item">
						<text class="title">发货地区：</text>
						<text class="detail link">{{ props.metaData.mercariMetaData.shippingFromArea.name }}</text>
					</view>
					<view class="notice-item">
						<text class="title">运费承担：</text>
						<text class="detail link">{{ props.metaData.mercariMetaData.shippingPayer.name }}</text>
					</view>
					<view class="notice-item">
						<text class="title">快递方式：</text>
						<text class="detail link">{{ props.metaData.mercariMetaData.shippingMethod.name }}</text>
					</view>
					<view class="notice-item">
						<text class="title">配送时效：</text>
						<text class="detail link">{{ props.metaData.mercariMetaData.shippingDuration.name }}</text>
					</view>
					<view class="notice-item">
						<text class="title">商品状态：</text>
						<text class="detail link">{{ props.metaData.mercariMetaData.itemCondition.name }}</text>
					</view>
					<view class="notice-item">
						<text class="title">商品分类：</text>
						<text class="detail link">{{ props.metaData.mercariMetaData.itemCategory.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="props.metaData.product.platformType == 13" class="card-content">
			<view class="notice-box">
				<view class="notice-box__content">
					<view class="notice-item">
						<text class="title">商品尺寸：</text>
						<text class="detail link">{{ props.metaData.smarpriseMetaData.size }}</text>
					</view>
					<view class="notice-item">
						<text class="title">商品材质：</text>
						<text class="detail link">{{ props.metaData.smarpriseMetaData.material }}</text>
					</view>
					<view class="notice-item">
						<text class="title">作品名称：</text>
						<text class="detail link">{{ props.metaData.smarpriseMetaData.artist.name }}</text>
					</view>
					<view class="notice-item">
						<text class="title">商品分类：</text>
						<text class="detail link">{{ props.metaData.smarpriseMetaData.category }}</text>
					</view>
					<view class="notice-item">
						<text class="title">开售时间：</text>
						<text class="detail link">{{ sheep.$helper.timeFormat(props.metaData.smarpriseMetaData.openDate, "yyyy年mm月dd日") }}</text>
					</view>
					<view class="notice-item">
						<text class="title">截止：</text>
						<text class="detail link">{{ sheep.$helper.timeFormat(props.metaData.smarpriseMetaData.endDate, "yyyy年mm月dd日") }}</text>
					</view>
					<view class="notice-item">
						<text class="title">预计到仓：</text>
						<text class="detail link">{{ sheep.$helper.timeFormat(props.metaData.smarpriseMetaData.endDate, "yyyy年mm月dd日") }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import sheep from '@/sheep';
import {reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app";

const { safeAreaInsets } = sheep.$platform.device;

const props = defineProps({
	metaData: {
		type: Object,
		default: {},
	},
});

const state = reactive({
	chinese: '',
	view: 'source'
})

onLoad(() => {
	console.log('source-data-card', props.metaData)
})

function onTranslate() {
	if (state.chinese) {
		state.view = 'target'
		return
	}
	// 加载提示
	sheep.$helper.toast('正在翻译');
	sheep.$api.goods.translate({
		content: props.content
	}).then(res => {
		state.chinese = res;
		state.view = 'target'
	})
}

function onReset() {
	state.view = 'source'
}
</script>

<style lang="scss" scoped>
.detail-content-card {
	margin-top: 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 1px 1px 50px #dadada;

	padding: 30rpx;

	/* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	background-size: 100% 15% !important;
	background-repeat: no-repeat;

	.card-header {
		.line {
			width: 6rpx;
			height: 30rpx;
			background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
			border-radius: 3rpx;
		}

		.title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.des {
			font-size: 24rpx;
			color: $dark-9;
		}

		.more-btn {
			font-size: 24rpx;
			color: var(--ui-BG-Main);
		}

		.content {
			white-space: pre-wrap; // 保持文本的格式并允许自动换行
			word-wrap: break-word; // 长单词或URL内部断行，防止溢出
			overflow-wrap: break-word; // 提高兼容性
		}
	}
}

.notice-box {
	background: #fff;
	border-radius: 10rpx;
	margin: 0 20rpx 20rpx 20rpx;

	.notice-box__head {
		font-size: 30rpx;

		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 80rpx;
		border-bottom: 1rpx solid #dfdfdf;
		padding: 0 25rpx;
	}

	.notice-box__content {
		padding: 20rpx;

		.self-pickup-box {
			width: 100%;

			.self-pickup--img {
				width: 200rpx;
				height: 200rpx;
				margin: 40rpx 0;
			}
		}
	}



	.notice-item,
	.notice-item--center {
		display: flex;
		align-items: center;
		line-height: normal;
		margin-bottom: 24rpx;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.detail {
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}
	}
}
</style>
